<template>
  <div class="inspection-work">
    <el-card>
      <div class="top-search" v-has-permi="['inspection:internet:query']">
        <el-form :model="queryParams" label-width="auto" :inline="true">
          <el-form-item label="巡检人">
            <el-select v-model="queryParams.userId" placeholder="请选择" style="width: 100%;" @change="getList">
              <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button plain @click="resertList">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button type="primary" @click="handlerAdd" v-has-permi="['inspection:internet:add']">增加</el-button>
        <el-button type="success" @click="handlerEdit" v-has-permi="['inspection:internet:edit']">编辑</el-button>
        <el-button type="danger" @click="handlerDel" v-has-permi="['inspection:internet:delete']">删除</el-button>
      </div>
      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="userName" label="巡检人名称" />
          <el-table-column property="inspectTime" label="巡检日期"> </el-table-column>
          <el-table-column property="modelName" label="模型表名称" />
          <el-table-column property="status" label="完成情况" >  <template #default="scope">   <el-tag :type="scope.row.status=='1'?'success':'danger'">{{scope.row.status=='1'?'已完成':'未完成'}}</el-tag>   </template> </el-table-column>
          <el-table-column property="name" label="操作">
            <template #default="scope">
              <div>
                <el-button v-has-permi="['inspection:internet:export']" plain type="primary" size="small" v-if="scope.row.status=='1'" @click="exportExcel(scope.row)">导出</el-button>
                <el-button v-has-permi="['inspection:internet:detail']" plain type="info" size="small" @click="toDetail(scope.row)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <!-- 新增弹框 -->
    <el-dialog v-model="internetVisible" :title="internetTile" width="800" :close-on-click-modal="false">
      <el-form ref="internetFormRef" style="max-width: 800px" :model="internetForm" label-width="auto" class="demo-ruleForm" status-icon>
        <el-form-item label="巡检人:" prop="userId" :rules="[{ required: true, message: '请选择巡检人' }]">
          <el-select v-model="internetForm.userId" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="巡检日期:" prop="inspectTime" :rules="[{ required: true, message: '请选择巡检日期' }]">
          <el-date-picker v-model="internetForm.inspectTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" :editable="false" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="模型:" prop="modelId" :rules="[{ required: true, message: '请选择模型' }]">
          <el-select v-model="internetForm.modelId" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in modelList" :key="item.modelId" :label="item.modelName" :value="item.modelId" @click="modelSelect(item)" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="internetVisible = false">关闭</el-button>
          <el-button type="primary" @click="internetEnter"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情 -->
    <el-drawer v-model="detailFlag" :title="detailTitle" direction="rtl" size="80%" :close-on-click-modal="false">
      <DetailDrawer ref="detailDrawerRef" :rowId="rowID" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {listUser} from '@/api/system/user'
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import DetailDrawer from './DetailDrawer.vue'
import {inspectServerNetworkList ,inspectmodelList ,inspectmodelAdd,inspectmodelEdit,inspectmodelDel} from '@/api/inspection'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const searchConfig = ref({
  inspectionPerson: ''
});
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type:1,
    userId:""
  },
  tableData:[],
  internetVisible:false,
  internetTile:"",
  internetForm:{},
  detailFlag:false,
  detailTitle:"详情",
  rowID:""
});
const { queryParams ,tableData  ,internetVisible ,internetTile ,internetForm ,detailFlag,detailTitle,rowID} = toRefs(data);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};
/* 新增 */
const handlerAdd = async()=>{
  internetVisible.value = true
  internetTile.value = '新增'
  internetForm.value = {}
}
/* 新增确认 */
const internetEnter = async()=>{
  console.log(internetForm.value);
  let data= {...internetForm.value,type:queryParams.value.type}
  const res =internetTile.value == '新增'? await inspectmodelAdd({...data}) :await inspectmodelEdit({...data})
  console.log(res);
  if(res.code==200){
    ElMessage.success( internetTile.value+'成功')
    internetVisible.value = false
    await getList()
  }
}

/* 修改 */
const handlerEdit = ()=>{
  internetTile.value = '编辑'
  console.log(multipleSelection.value);
  if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }

    internetVisible.value = true
    internetForm.value= multipleSelection.value[0]



}
/* 删除 */
const handlerDel = ()=>{
  if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const arr = multipleSelection.value.map((item:any)=>item.id)
      console.log(arr);
      const res = await inspectmodelDel({ids:arr.join(','),type:queryParams.value.type})
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
      await  getList()
      }


    })
    .catch(() => {

    })
}



/* 模型选中 */
const modelSelect = (item)=>{
  console.log(item);
  internetForm.value['modelName'] = item.modelName

}



/* 详情 */
const toDetail  = (row)=>{
  console.log(row);
  rowID.value = row.id
  detailFlag.value = true
}
/* 导出 */
const exportExcel = async(row)=>{ 

proxy?.download(
  '/inspect/serverNetwork/export',
  {
    id:row.id
  },
  `网络及安全设备巡检表.zip`
);


}  







const userList = ref<any>([])
const getUserList = async()=>{
  const res  = await listUser({})
  console.log(res);
  userList.value = res.rows
}
getUserList()

const modelList = ref<any>([])
const getmodelList = async()=>{
  const res  = await inspectmodelList({type:queryParams.value.type})
  console.log(res);
  modelList.value = res.data
}
getmodelList()



/* 重置 */
const resertList = async()=>{
  queryParams.value ={ pageNum: 1,
    pageSize: 10,
    type:1,
    userId:""}
    await getList()
}
const getList = async() => {
  console.log('getList',queryParams.value);

  const res = await inspectServerNetworkList({...queryParams.value})
  console.log(res);
  tableData.value = res.rows
};
getList()
</script>

<style scoped lang="scss">
.inspection-work {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;
    .table-top {
      margin-bottom: 20px;
    }
    .table-content {
      width: 100%;
    }
  }
}


:deep(.el-input__wrapper){
  width: 100%;
}
</style>
